<div class="modal-dialog modal-lg" role="document" id="chooseThemeModal">
    <div class="modal-content">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="icon-cancel"></i>
            </button>
            <h3>Set UI Theme:</h3>
            
            <div class="theme-previews">
                <div class="theme theme-dark" data-bind="click: _.partial(useTheme, 'dark'), css: { 'active': currentTheme() === 'dark' }">
                    <img src="../../../Content/img/dark-theme.svg" class="img-responsive" />
                    <h2 class="theme-title">Dark</h2>
                </div>
                <div class="theme theme-classic" data-bind="click: _.partial(useTheme, 'classic'), css: { 'active': currentTheme() === 'classic' }">
                    <img src="../../../Content/img/classic-theme.svg" class="img-responsive" />
                    <h2 class="theme-title">Classic</h2>
                </div>
                <div class="theme theme-blue" data-bind="click: _.partial(useTheme, 'blue'), css: { 'active': currentTheme() === 'blue' }">
                    <img src="../../../Content/img/blue-theme.svg" class="img-responsive" />
                    <h2 class="theme-title">Blue</h2>
                </div>
                <div class="theme theme-light" data-bind="click: _.partial(useTheme, 'light'), css: { 'active': currentTheme() === 'light' }">
                    <img src="../../../Content/img/light-theme.svg" class="img-responsive" />
                    <h2 class="theme-title">Light</h2>
                </div>
            </div>
        </div>
    </div>
</div>
